<template>
  <div v-loading="dataLoadig" class="data-detail">
    <div class="explain-text app-error-color__text" v-if="detailData.explains && detailData.explains.length">
      <div class="flex-row column-center"><i class="el-icon-star-on app-font-size20"></i><span>异常说明</span></div>
      <div class="explain-item app-font-size14" v-for="(item, index) in detailData.explains" :key="index">
        <span>{{ (index + 1) }}、</span>
        <span>{{ item }}</span>
      </div>
    </div>
    <div class="info-area">
      <el-descriptions size="medium" title="" :column="column" border>
        <el-descriptions-item v-for="(item, index) in detailData.data" :key="index" :label="item.label"
          :labelClassName="item.warning ? 'app-error-color__text' : ''"
          :contentClassName="item.warning ? 'app-error-color__text' : ''" :span="item.span">
          {{ (item.value === '' || item.value === null || item.value === undefined ? '/' : (item.value + '').trim()) }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
export default {
  name: "data-detail",
  components: {},
  props: {
    detailData: {
      type: Object,
      default() {
        return {}
      },
    },
    dataLoadig: {
      type: Boolean,
      default() {
        return false
      },
    },
    column: {
      type: Number,
      default() {
        return 3
      },
    },
  },
  data() {
    return {};
  },
  computed: {
  },
  mounted() {
    this.$log.info('当前详情页面展示的数据为：', this.detailData);
  },
  methods: {
  },
};
</script>
<style lang='scss'>
.data-detail {
  min-height: 300px;
  padding-right: 5px;

  .explain-text {
    margin-bottom: 10px;

    .explain-item {
      margin-top: 10px;

      &:first-child {
        margin-top: 0;
      }
    }
  }
}
</style>
